<div class="big-event-container">

  <ng-container *ngIf="type==1">
    <div class="left-content">
      <div class="timeline">
        <img class="clock-img" src="assets/images/timeline/click.png">
        <div class="item-wrap" *ngFor="let item of timeLineData;let i = index">
          <div class="year-wrap">
            <span [class]="'year bg-'+i%2" (click)="selectYearChange(item.year)">{{item.year}}年</span>
          </div>
          <div [class]="'divider type'+i%2">
            <span class="left-dot">
               <img [src]="'assets/images/timeline/dot-left-'+i%2+'.png'">
            </span>
            <span class="right-dot">
               <img [src]="'assets/images/timeline/dot-right-'+i%2+'.png'">
            </span>
          </div>
          <div class="content">
            <img [src]="'assets/images/timeline/item-img-'+i%3+'.png'">
            <ng-container *ngFor="let it of item.wrsWsEvents;let j = index">
              <ng-container *ngIf="j==0">
                <div [class]="'first-item icon-'+i%2">{{it.title}}</div>
              </ng-container>
              <ng-container *ngIf="j!=0">
                <div [class]="'icon-'+i%2">{{it.title}}</div>
              </ng-container>
            </ng-container>
          </div>
        </div>
      </div>
    </div>
    <div class="right-content">

      <div class="right-content-title">
        {{selectYear}}年调度大事记
      </div>

      <div class="button-group">
        <button nz-button class="btn-2" nzType="default" (click)="onAdd()">新增</button>
       <!-- <button nz-button class="btn-3" nzType="default" style="margin-left: 20px">修改</button>
        <button nz-button class="btn-4" nzType="default" style="margin-left: 20px">删除</button>-->
        <i class="btn-6" nz-icon nzType="unordered-list" nzTheme="outline" (click)="changeToTable(2)" nzTooltipTitle="切换表格" nzTooltipPlacement="top" nz-tooltip></i>
      </div>

      <div class="content">
        <div class="pos1 type3" *ngIf="pos1Data">
          <div class="month-pic" (click)="posClick(pos1Data.seq, -2)">
              {{pos1Data.month}}月
          </div>
          <span class="dot"></span>
          <div class="text-wrap">
            <img src="assets/images/timeline/text-left-line.png">
            <div class="item-wrap">
              <div class="item" *ngFor="let item of pos1Data.wrsWsEvents">
                <div class="title">
                  【{{item.time}}】
                </div>
                <div class="detail">
                  {{item.content}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pos2 type2" *ngIf="pos2Data">
          <div class="month-pic" (click)="posClick(pos2Data.seq, -1)">
            {{pos2Data.month}}月
          </div>
          <span class="dot"></span>
          <div class="text-wrap">
            <img src="assets/images/timeline/text-left-line.png">
            <div class="item-wrap">
              <div class="item" *ngFor="let item of pos2Data.wrsWsEvents">
                <div class="title">
                  【{{item.time}}】
                </div>
                <div class="detail">
                  {{item.content}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pos3 type1" *ngIf="pos3Data">
          <div class="month-pic">
            {{pos3Data.month}}月
          </div>
          <span class="dot"></span>
          <div class="text-wrap">
            <img src="assets/images/timeline/text-left-line.png">
            <div class="item-wrap">
              <div class="item" *ngFor="let item of pos3Data.wrsWsEvents">
                <div class="title">
                  【{{item.time}}】
                </div>
                <div class="detail">
                  {{item.content}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pos4 type3" *ngIf="pos4Data">
          <div class="month-pic" (click)="posClick(pos4Data.seq, 1)">
            {{pos4Data.month}}月
          </div>
          <span class="dot"></span>
          <div class="text-wrap">
            <img src="assets/images/timeline/text-left-line.png">
            <div class="item-wrap">
              <div class="item" *ngFor="let item of pos4Data.wrsWsEvents">
                <div class="title">
                  【{{item.time}}】
                </div>
                <div class="detail">
                  {{item.content}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pos5 type3" *ngIf="pos5Data">
          <div class="month-pic" (click)="posClick(pos5Data.seq, 2)">
            {{pos5Data.month}}月
          </div>
          <span class="dot"></span>
          <div class="text-wrap">
            <img src="assets/images/timeline/text-left-line.png">
            <div class="item-wrap">
              <div class="item" *ngFor="let item of pos5Data.wrsWsEvents">
                <div class="title">
                  【{{item.time}}】
                </div>
                <div class="detail">
                  {{item.content}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
  </ng-container>

  <ng-container *ngIf="type==2">
    <nz-card [nzBordered]="false">
      <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
        <nz-form-item>
          <nz-form-label>年份</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="year" nzAllowClear nzPlaceHolder="年份"
                       style="width: 170px;">
              <nz-option nzLabel="2020" nzValue="2020"></nz-option>
              <nz-option nzLabel="2019" nzValue="2019"></nz-option>
              <nz-option nzLabel="2018" nzValue="2018"></nz-option>
              <nz-option nzLabel="2017" nzValue="2017"></nz-option>
              <nz-option nzLabel="2016" nzValue="2016"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>重要级</nz-form-label>
          <nz-form-control>
            <nz-select nzPlaceHolder="请选择" formControlName="level">
              <nz-option nzLabel="高" nzValue="1"></nz-option>
              <nz-option nzLabel="中" nzValue="2"></nz-option>
              <nz-option nzLabel="低" nzValue="3"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>关键字</nz-form-label>
          <nz-form-control>
            <input formControlName="key" nz-input placeholder="关键字"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
            <button nz-button (click)="onAdd()" style="margin-left: 10px">新增</button>
            <button nz-button nzType="primary" style="margin-left: 20px" (click)="changeToTable(1)"><i nz-icon nzType="left"></i>返回</button>
          </nz-form-control>
        </nz-form-item>
      </form>

      <div nz-row nzGutter="12" style="margin-top: 10px">
        <div nz-col class="gutter-row" nzSpan="24">
          <div class="gutter-box">
            <div class="table-wrap">
              <nz-table
                #recordTable
                nzSize="middle"
                [nzData]="recordTableData">
                <thead>
                <tr>
                  <th width="200">调度事件标题</th>
                  <th width="120">时间</th>
                  <th width="80">重要级</th>
                  <th>时间具体内容</th>
                  <th width="120">备注</th>
                  <th width="120">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let row of recordTable.data">
                  <td>{{ row.title }}</td>
                  <td>{{ row.time }}</td>
                  <td>{{ levelMap[row.level] }}</td>
                  <td>{{ row.content }}</td>
                  <td>{{ row.remark }}</td>
                  <td>
                    <a (click)="onEdit(row)">修改</a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                       (nzOnConfirm)="onDelete(row.id)">
                      删除
                    </a>
                  </td>
                </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
        </div>
      </div>
    </nz-card>

  </ng-container>

  <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="650" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
            (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
    <form nz-form [formGroup]="form">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">调度事件标题</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="title" style="width: 500px">
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">调度时间时间</nz-form-label>
            <nz-form-control>
              <nz-date-picker formControlName="time"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">重要级</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="level" nzAllowClear nzPlaceHolder="重要级"
                         style="width: 170px;">
                <nz-option nzLabel="高" nzValue="1"></nz-option>
                <nz-option nzLabel="中" nzValue="2"></nz-option>
                <nz-option nzLabel="低" nzValue="3"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">事件具体内容</nz-form-label>
            <nz-form-control>
              <textarea formControlName="content" nz-input rows="6" style="width: 500px"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">备注</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="remark" style="width: 500px">
            </nz-form-control>
          </nz-form-item>
        </div>

      </div>
    </form>
  </nz-modal>
</div>


